<template>
	<div class="detail">
		<header><van-nav-bar title="活动详情" left-arrow @click-left="$router.go(-1)" /></header>

		<div class="list" ref="listRef" v-if="details && details.id">
			<div class="list-item">
				<div style="display: flex;align-items: center">
					<div style="flex: 1" class="">
						<div
							class="list-item-state"
							:style="{
								backgroundColor: STATE_TEXT_COLOR[details.participationStatus]
							}"
						>
							{{ STATE_TEXT[details.participationStatus] }}
						</div>
					</div>
					<span
						style="flex: 1;text-align: right;margin-right: 5px;line-height: 32px;"
						class="tips"
						v-if="details.couponPrototype && details.couponPrototype.operaLog && details.couponPrototype.operaLog.length > 5"
					>
						{{ details.couponPrototype.operaLog }}
					</span>
				</div>
				<div>
					<div class="list-item-label list-item-title" v-if="details && details.type !== 0">{{ details.activityContent }}</div>

					<div class="list-item-label list-item-title" v-if="details.couponPrototype">{{ details.couponPrototype.couponName }}</div>

					<div class="list-item-label">
						<van-icon :name="financingPartyIcon" />
						<span class="list-item-text">
							出资方：
							{{
								details.financingParty === INVITED_MERCHANT_TYPE ? FINANCINGPARTY_STATE_TEXT[INVITED_MERCHANT_TYPE] : FINANCINGPARTY_STATE_TEXT[THIS_MERCHANT_TYPE]
							}}
						</span>
						<van-icon style="margin: 0 5px" name="question-o" @click="onClickBusinessTips" />
					</div>
					<!-- <div class="list-item-label" v-if="details.couponPrototype || (details && details.type !== 0)">
						<van-icon :name="signUpTimeIcon" />
						<div class="list-item-text">
							报名时间：
							<span v-if="details && details.type !== 0">长期</span>
							<span v-else>{{ details.couponPrototype.signUpStartTime }}至{{ details.couponPrototype.signUpEndTime }}</span>
						</div>
					</div> -->
					<div class="list-item-label" v-if="details.couponPrototype">
						<van-icon :name="denominationIcon" />
						<span class="list-item-text">
							券面额：
							<span v-if="details.couponPrototype.couponType === 'cash'">{{ details.couponPrototype.denomination | filterMoney }}元</span>

							<span v-if="details.couponPrototype.couponType === 'discount'">{{ details.couponPrototype.discountPercent | filterDiscount }}折</span>
						</span>
					</div>
					<div class="list-item-label" v-if="details.couponPrototype && details.couponPrototype.couponType === 'discount'">
						<van-icon :name="denominationIcon" />
						<span class="list-item-text">
							优惠上限：
							<span>{{ details.couponPrototype.discountMaximum | filterMoney }}元</span>
						</span>
					</div>
					<div class="list-item-label" v-if="details.couponPrototype">
						<van-icon :name="transactionMinimumIcon" />
						<span class="list-item-text">券门槛：</span>
						<span class="list-item-text">满{{ details.couponPrototype.transactionMinimum | filterMoney }}元可使用</span>
						<span class="list-item-text">，最多叠加{{ details.couponPrototype.maxUseNum }}张</span>
					</div>

					<div class="list-item-label" style="align-items: flex-start" v-if="details.type !== 0 && details.bizDescMap">
						<van-icon :name="financingPartyIcon" />
						<div class="list-item-text">会员折扣：</div>
						<div class="">
							<div class="list-item-text">
								<div v-for="(itemC, indexC) in details.bizDescMap.detail" :key="indexC">{{ itemC }}</div>
							</div>
						</div>
					</div>

					<div class="list-item-label" v-if="details.couponPrototype || details.activityContent !== 0">
						<van-icon :name="signUpTimeIcon" />
						<div class="list-item-text">
							<div class="list-item-text">
								有效期：

								<span v-if="details.type !== 0">长期</span>
								<span v-else>{{ details.couponPrototype.startTime }}至{{ details.couponPrototype.endTime }}</span>
							</div>
							<div>有效期内，任意时间可使用</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="footer" v-if="details && details.couponPrototype">
			<van-button @click="onClickSubmit(false)" plain :disabled="details.couponPrototype.status !== 2 || details.participationStatus === 1">拒绝</van-button>
			<van-button @click="onClickSubmit(true)" class="van-button-edit" :disabled="details.participationStatus === 2">参与</van-button>
		</div>

		<div class="footer" v-if="(details && details.type !== 0 && details.participationStatus === 1) || (details && details.type !== 0 && details.participationStatus === 2)">
			<van-button @click="onClickSubmit(false)" plain :disabled="details.participationStatus === 1">拒绝</van-button>
			<van-button @click="onClickSubmit(true)" class="van-button-edit" :disabled="details.participationStatus === 2">参与</van-button>
		</div>
	</div>
</template>

<script>
import { Dialog } from 'vant';
import { activityDetail, activityParticipateIn, activityRefuse } from '@/api/flow/index';
import { filterMoney, STATE_TEXT, STATE_TEXT_COLOR, filterDiscount, INVITED_MERCHANT_TYPE, THIS_MERCHANT_TYPE, FINANCINGPARTY_STATE_TEXT } from './config';

export default {
	name: 'detail',
	data() {
		return {
			INVITED_MERCHANT_TYPE,
			THIS_MERCHANT_TYPE,
			FINANCINGPARTY_STATE_TEXT,
			STATE_TEXT,
			STATE_TEXT_COLOR,
			details: null,
			financingPartyIcon: require('@/assets/img/flow/financingParty.png'),
			signUpTimeIcon: require('@/assets/img/flow/signUpTime.png'),
			transactionMinimumIcon: require('@/assets/img/flow/transactionMinimum.png'),
			denominationIcon: require('@/assets/img/flow/denomination.png')
		};
	},
	computed: {
		flowQueryData() {
			return this.$store.state.flow.flowQueryData;
		}
	},
	filters: {
		filterMoney,
		filterDiscount
	},
	created() {
		const id = this.$route.query.id;
		if (!id) {
			Dialog({
				title: '提示',
				message: '暂无实体内容，请退出重试'
			}).then(() => {
				this.$router.go(-1);
			});
		} else {
			this.initData();
		}
	},
	methods: {
		onClickBusinessTips() {
			Dialog({
				title: '提示',
				message: '出资方指优惠折扣或活动优惠的钱由谁承担'
			});
		},
		async initData() {
			const id = this.$route.query.id;
			const { data } = await activityDetail({
				merchantId: this.flowQueryData.merchantId,
				couponActivityId: id
			});
			const { data: details, code } = data;
			if (code === 0) {
				this.details = details;
			}
		},
		async onClickSubmit(state) {
			const id = this.$route.query.id;
			const message = `${state ? '参与' : '拒绝'}后，超级会员用户下单将${state ? '' : '不'}可使用活动优惠。`;
			const api = state ? activityParticipateIn : activityRefuse;
			Dialog({
				title: '提示',
				message,
				showCancelButton: true
			}).then(async () => {
				const { data } = await api({
					merchantId: this.flowQueryData.merchantId,
					couponActivityId: id
				});
				const { code, msg } = data;
				if (code === 0) {
					this.$toast.success(`${state ? '参与' : '拒绝'}成功`);
					await this.initData();
				} else {
					this.$toast.fail(msg);
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.detail {
	padding: 10px;
	background-color: whitesmoke;
	height: 100vh;
}
.tips {
	color: #f05357;
	margin-left: 20px;
	margin-top: 5px;
	font-size: 0.75rem;
}

.list {
	height: 86vh;
	overflow: hidden;
	overflow-y: scroll;
	font-size: 0.85rem;
	background-color: whitesmoke;
	&-item {
		width: 95%;
		margin: 20px auto;
		background-color: white;
		box-shadow: 0px 0px 5px 0px rgba(166, 155, 149, 0.12);
		border-radius: 15px;
		padding: 5px 0 30px 0;
		&-state {
			width: 138px;
			height: 50px;
			color: white;
			line-height: 50px;
			text-align: center;
			border-bottom-right-radius: 9999px;
			border-top-right-radius: 9999px;
			background: #ffb72f;
			font-size: 26px;
			margin-top: 14px;
		}
		&-label {
			padding: 5px 30px;
			margin-top: 20px;
			font-size: 26px;
			display: flex;
			align-items: center;
		}
		&-text {
			font-weight: 500;
			color: #131313;
			opacity: 0.8;
		}
		&-title {
			font-weight: bold;
			display: flex;
			align-items: center;
			font-size: 32px;
			opacity: 1 !important;
		}
		&-financingParty {
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.van-icon-question-o {
			color: greenyellow;
		}
		&-time {
			display: flex;
			align-items: center;
		}
	}
}
.footer {
	width: 100vw;
	position: fixed;
	bottom: 0;
	display: flex;
}
.van-icon {
	font-size: 1.125rem;
	margin: 0 5px;
}

.van-button {
	width: 250px;
	height: 70px;
	border: 2px solid #ffb72f;
	border-radius: 35px;
	color: #ffb72f;
	margin: 0 auto;
	margin-bottom: 70px;
	&-edit {
		background-color: #ffb72f;
		color: white;
	}
}
</style>
